<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Animation - Basic</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  <script type="module">
    const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
    if (forceCSSAnimations) {
      Element.prototype.animate = null;
    }
    
    import { createAnimation } from '../../../../dist/ionic/index.esm.js';

    const squareA = document.querySelector('.square-a');
    
    const rootAnimation = createAnimation('root-animation-id');
    
    rootAnimation
      .addElement(squareA)
      .duration(500)
      .iterations(2)
      .easing('linear')
      .keyframes([
        { background: 'rgba(255, 0, 0, 0.5)', offset: 0, borderRadius: '0px' },
        { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33, borderRadius: '10px' },
        { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66, borderRadius: '20px' },
        { background: 'rgba(255, 0, 0, 0.5)', offset: 1, borderRadius: '30px' }
      ])
      .onFinish(() => {
        const ev = new CustomEvent('ionAnimationFinished');
        squareA.dispatchEvent(ev); 
      });
      
    document.querySelector('.play').addEventListener('click', () => {
      rootAnimation.play();
    });
    
    document.querySelector('.pause').addEventListener('click', () => {
      rootAnimation.pause();
    });
    
    document.querySelector('.stop').addEventListener('click', () => {
      rootAnimation.stop();
    });
    
    document.querySelector('.destroy').addEventListener('click', () => {
      rootAnimation.destroy();
    });
    
  </script>
  
  <style>
    .square {
      width: 100px;
      height: 100px;
      background: rgba(255, 0, 0, 0.5);
      text-align: center;
      line-height: 100px;
      margin-left: 25px;
      margin-top: 25px;
      margin-bottom: 25px;
    }
  </style>
  </head>

<body
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Animations</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content>
      <div class="ion-padding">
        <ion-button class="play">Play</ion-button>
        <ion-button class="pause">Pause</ion-button>
        <ion-button class="stop">Stop</ion-button>
        <ion-button class="destroy">Destroy</ion-button>
        
        <div class="square square-a">
          Hello
        </div>
      </div>
    </ion-content>
  </ion-app>
</body>

</html>

